<script setup lang="ts">
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import OBanner from 'shared/components/OBanner.vue';
import AppFooter from '@/components/AppFooter.vue';
import { toThousands, formatNumber } from 'shared/utils/helper';
import { useCommonStore } from '@/stores/common';

import homeBanner from '@/assets/bg.png';
const useCommon = useCommonStore();
const { t, locale } = useI18n();
locale.value = localStorage.getItem('lang') || 'zh';

// 获取数据
onMounted(() => {
  useCommon.getAllData();
});
</script>

<template>
  <o-banner class="home-banner">
    <div class="banner-content">
      <div class="community-content">
        <div class="community-info">
          <p class="title">{{ t('home.user') }}</p>
          <p class="num">{{ toThousands(useCommon.allData.users) }}</p>
        </div>
        <div class="community-info">
          <p class="title">{{ t('home.contributors') }}</p>
          <p class="num">
            {{ toThousands(useCommon.allData.contributors) }}
          </p>
        </div>
        <div class="community-info">
          <p class="title">{{ t('home.partners') }}</p>
          <p class="num">{{ toThousands(useCommon.allData.partners) }}</p>
        </div>
        <div class="community-panel">
          <div class="community-info">
            <p class="title">{{ t('home.prs') }}</p>
            <p class="num">{{ formatNumber(useCommon.allData.prs) }}</p>
          </div>
          <div class="community-info">
            <p class="title">{{ t('home.issues') }}</p>
            <p class="num">{{ formatNumber(useCommon.allData.issues) }}</p>
          </div>
          <div class="community-info">
            <p class="title">{{ t('home.comments') }}</p>
            <p class="num">{{ formatNumber(useCommon.allData.comments) }}</p>
          </div>
        </div>
      </div>

      <p class="time">{{ useCommon.time }}</p>
    </div>

    <template #video>
      <video
        class="bg-video"
        src="https://datastat.obs.cn-north-4.myhuaweicloud.com/datastat-mindspore-home.mp4"
        :poster="homeBanner"
        autoplay
        loop
        muted
        controlslist="nodownload nofullscreen"
        x5-playsinline="true"
        playsinline="true"
        webkit-playsinline="true"
      ></video>
    </template>
  </o-banner>

  <footer><app-footer></app-footer></footer>
</template>

<style lang="scss" scoped>
.bg-video {
  height: 100vh;
}
.banner-content {
  padding: 100px 0;
  color: #ffffff;
  height: calc(100vh);
  position: relative;
  overflow: hidden;
  .community-content {
    display: grid;
    height: 100%;
    align-items: center;

    .title {
      font-size: 24px;
      line-height: 24px;
      color: #fff;
    }
    .num {
      font-size: 64px;
      color: #fff;
      line-height: 84px;
      font-weight: 400;
    }
    .community-info {
      text-align: left;
    }
    .community-panel {
      display: flex;
      .community-info {
        margin-bottom: 0;
        margin-right: 64px;
      }
      .title {
        font-size: 16px;
        color: #d3dce9;
      }
      .num {
        font-size: 40px;
        line-height: 48px;
      }
    }
  }

  .time {
    display: inline-block;
    font-size: 12px;
    color: #ffffff;
    line-height: 16px;
    opacity: 0.8;
  }
  .more {
    position: absolute;
    bottom: 20px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    cursor: pointer;
    color: #fff;
    p {
      font-size: 12px;
      color: #fff;
      margin-bottom: 10px;
    }
    .icon {
      animation: loadingtd 2s infinite;
    }
  }
}
@keyframes loadingtd {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
